<template>
  <div>
    <div class="search">
      <div class="search2" v-for="(item,index) in books" :key="index">
        <div class="regin">
          <div class="left4">
            <img
              :src="`http://statics.zhuishushenqi.com`+`${item.cover}`"
              class="img1"
              @click="jump(item._id)"
            />
          </div>
          <div class="right4">
            <h3 @click="jump(item._id)">{{item.title}}</h3>
            <p class="author">
              <span>{{item.author}}</span>&nbsp;丨&nbsp;
              <span>{{item.cat}}</span>
            </p>
            <p class="shortIntro">{{item.shortIntro}}</p>
            <p class="lastchapter">{{item.lastChapter}}</p>
          </div>
          <div class="maxright">
            <p class="follower">
              <span>{{item.latelyFollower}}</span>
              <span>花花</span>
            </p>
            <p class="count">
              <span>{{item.wordCount}}</span>
              <span>字数</span>
            </p>
            <p class="btn">
              <el-button @click="jump(item._id)">
                <span>书籍详情</span>
              </el-button>
              <el-button @click="addBook(item)">
                <span>加入书架</span>
              </el-button>
            </p>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <!-- <div class="page">
        <el-button-group class="el-btn">
      <el-button type="danger" icon="el-icon-arrow-left" @click="prevPage()">上一页</el-button>-->
      <!-- <span>第{{currentPage}}页/共{{totalPage}}页</span> -->
      <!-- <el-button type="danger" @click="nextPage()">
            下一页
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
      </el-button-group>-->
      <!-- <button @click="prevPage()">上一页</button>
      <span>第{{currentPage}}页/共{{totalPage}}页</span>
      <button @click="nextPage()">下一页</button>-->
      <!-- </div> -->
    </div>

    <!-- 分页器 -->

    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout=" prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { search } from "@/api/wl";

export default {
  name: "workweibo_list",
  data() {
    return {
      books: [],
      oldBooks: [],
      total: 0

      // totalPage: 1, // 统共页数，默认为1
      // currentPage: 1, //当前页数 ，默认为1
      // pageSize: 10, // 每页显示数量
      // currentPageData: [] //当前页显示内容
    };
  },

  created() {
    let str = this.$route.query.id;
    this.cc(str);
  },
  computed: {
    fn() {
      return this.$route.query;
    }
  },
  methods: {
    // 设置当前页面数据，对数组操作的截取规则为[0~9],[10~20]...,
    // 当currentPage为1时，我们显示(0*pageSize+1)-1*pageSize，当currentPage为2时，我们显示(1*pageSize+1)-2*pageSize...
    // getCurrentPageData(books) {
    //   let begin = (this.currentPage - 1) * this.pageSize;
    //   let end = this.currentPage * this.pageSize;
    //   this.currentPageData = books.slice(begin, end);
    //   console.log(this.currentPageData);
    // },
    //上一页
    // prevPage(currentPageData) {
    //   console.log(this.currentPage);
    //   if (this.currentPage == 1) {
    //     return false;
    //   } else {
    //     this.currentPage--;
    //     this.getCurrentPageData(this.books);
    //   }
    // },
    // 下一页
    // nextPage(currentPageData) {
    //   console.log(this.currentPage);
    //   if (this.currentPage == this.totalPage) {
    //     return false;
    //   } else {
    //     this.currentPage++;
    //     this.getCurrentPageData(this.books);
    //   }
    // },

    //加入书架
    addBook(book) {
      this.$store.commit("getMessage", book);
      // console.log(1);
    },
    jump(id) {
      localStorage.setItem("_id", id);
      this.$router.push({ path: "/bookdetails" });
    },
    cc(str) {
      search(str).then(res => {
        let { books } = res.data;
        this.books = books.slice(0, 5);
        this.oldBooks = books;
        this.total = books.length;
        // this.currentPage1 =
        // console.log(this.books);
        // this.totalPage = Math.ceil(this.books.length / this.pageSize);
        // // 计算得0时设置为1
        // this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
        // this.getCurrentPageData(this.books);
      });
    },
    handleCurrentChange(pageNum) {
      let start = (pageNum - 1) * 5;
      let end = pageNum * 5;
      this.books = this.oldBooks.slice(start, end);
    }
  },
  watch: {
    fn() {
      let str = this.$route.query.id;
      this.cc(str);
    }
  }
};
</script>
<style scoped>
body {
  background: white !important;
}
.search {
  width: 1000px;
  height: 1000px;
  overflow: hidden;
  margin: 30px auto;
  margin-top: 100px;
}
.search2 {
  background-color: white;
  height: 240px;
  margin-bottom: 10px;
}
.regin {
  height: 240px;

  border-bottom: 1px solid #ccc;
  margin: 0 auto;

  /* height: 1000px; */
  width: 1000px;
  overflow: hidden;
  margin: 0 auto;
  overflow: hidden;
}
.search2 {
  height: 180px;
  margin-top: 20px;
  border-bottom: 1px solid #e6e6e6;
}

.img1 {
  width: 110px;
  height: 150px;
  display: block;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.left4 {
  float: left;
}
.right4 {
  margin-left: 20px;
  width: 600px;
  float: left;
}

.right .el-icon-user {
  color: #a6a6a6 !important;
}
.right4 h3 {
  color: #bf2c24;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  font-weight: normal;
  cursor: pointer;
}
.right4 .author {
  line-height: 16px;
  font-size: 12px;
  color: #a6a6a6;
  margin: 3px 0;
}
.right4 .shortIntro {
  font-size: 14px;
  line-height: 24px;
  height: 68px;
  overflow: hidden;
  margin-bottom: 8px;
  color: #666;
}
.right4 .lastchapter {
  line-height: 22px;
  font-size: 12px;
  color: #3f5a93;
  cursor: pointer;
}
.maxright {
  float: right;
}
.maxright .follower,
.maxright .count {
  font: 12px/18px PingFangSC-Regular, "-apple-system", Simsun;
  color: #262626;
  text-align: right;
  margin-top: 10px;
}
.maxright .follower span:nth-of-type(1),
.maxright .count span:nth-of-type(1) {
  padding-right: 3px;
}
.maxright .follower span:nth-of-type(2),
.maxright .count span:nth-of-type(2) {
  color: #ff5e66;
}
.btn {
  margin-top: 60px;
}
.btn .el-button:nth-of-type(1) {
  background: #bf2c24;
  border: 1px solid #bf2c24;
}
.btn .el-button:nth-of-type(1) span {
  color: white !important;
}
.btn .el-button:nth-of-type(2) {
  border: 1px solid #3f5a93;
  color: #3f5a93;
}
.btn .el-button:nth-of-type(2) span {
  color: #3f5a93;
}
.pagination {
  text-align: center;
}
.right4 .p1 {
  font-size: 18px;
  line-height: 24px;
}
.el-btn {
  float: right;
  color: #fff;
}
.page {
  overflow: hidden;
}
</style>